<template>
  <div class="enterprise-container">
    <div class="enter-label">{{ labelText }}</div>
    <div class="enterprises">
      <div
        class="enterprise-type"
        v-for="(item, idx) in enterpiseList"
        :key="idx"
        @click="onLinkHome(item.id)"
      >
        <span class="first-name">
          {{ firstName(item.name) }}
        </span>
        <span class="mb10">
          {{ item.name }}
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import { getMenu } from "@/services/user";
import { loadRoutes } from "@/utils/routerUtil";
import { mapMutations } from "vuex";
import { labelText } from "@/config/const";
import { setAuthorization } from "@/utils/request";
import { getInitPath } from "@/utils/util";

export default {
  name: "Enterprise",
  data() {
    return {
      enterpiseList: [],
      labelText
    };
  },
  components: {},
  computed: {
    firstName() {
      return function (name) {
        if (!name) {
          return;
        }
        return name.slice(0, 1);
      };
    }
  },
  mounted() {
    this.getEnterpriseList();
  },
  methods: {
    ...mapMutations("account", [
      "setUser",
      "setPermissions",
      "setRoles",
      "setEnterpriseList",
      "setEnterpriseId",
      "setUserInfo"
    ]),
    getEnterpriseList() {
      this.enterpiseList = this.$store.getters['account/enterpriseList'];
    },
    async onLinkHome(id) {
      setAuthorization({
        enterpriseId: id
      }, 'basic');

      // 将企业id放入vuex中
      this.setEnterpriseId(id);

      let params = {
        departmentId: null,
        roleId: null
      }

      const {
        data: { data, code }
      } = await getMenu(params);
      if (code === 200) {
        const {
          username: user = "",
          permissions,
          roles = [],
          resources,
          departmentId,
          roleId,
          departmentName,
          roleName
        } = data;

        setAuthorization({
          departmentId,
          roleId
        }, 'auth1');
        
        this.setUserInfo({ departmentName, roleName });
        this.setUser(user);
        this.setPermissions(permissions || []);
        this.setRoles(roles);
        if (!!resources && resources[0].children.length > 0) {
          loadRoutes(resources);
          // TODO 后续优化 获取初始页面路径
          let url = getInitPath(resources);
          this.$router.push(url);
        }
        else {
          this.$message.warning('当前企业页面不存在');
        }
      }
    }
  }
};
</script>

<style scoped lang="less">
.enterprise-container {
  padding: 20px;

  .enter-label {
    font-weight: bold;
  }

  .enterprises {
    .enterprise-type {
      display: flex;
      flex-direction: column;
      border: 1px solid #efefef;
      margin: 10px 10px 10px 0;
      text-align: center;
      border-radius: 5px;
      float: left;
      cursor: pointer;

      &:hover {
        background: #f6fafe;
      }

      .first-name {
        width: 100px;
        height: 100px;
        margin: 20px;
        line-height: 100px;
        background: #e0f2f1;
        font-size: 0.3rem;
      }
    }
  }

  .enterprise-name {
    width: 100px;
    height: 100px;
    background: #efefef;
    font-size: 20px;
    display: inline-block;
    text-align: center;
  }
}
</style>
